<template>
	<view class="bj" @touchmove.stop.prevent>
		<view class="usertxt">
			<image src="/static/tx.png"></image>
			<view style="font-weight: 800;">Hi Lily</view>
		</view>
		<uv-row customStyle="margin-top: 50rpx">
			<uv-col span="3">
				<view class="demo-layout bg-purple">
					<view class="TimeCard">
						{{ time.currentTime }}
					</view>
					<view class="TimeCard_1">
						<view class="TimeCard_1_1">{{time.currentDate}}</view>
						<view class="TimeCard_1_1">{{time.lunarDate}}</view>
					</view>
				</view>
			</uv-col>
			<uv-col span="6">
				<view class="demo-layout bg-purple-light" @click="tz('/pages/Weather/Weather')">
					<image src="/static/Weather/tq_qt.png"></image>
					<view class="txt">
						<text class="tqdtxt">新余市</text>
						<text class="tqxtxt">晴 16°C</text>
					</view>
					<text class="tqdtxt" style="color: #b3b3b3;">|</text>
					<view class="txt">
						<text class="tqdtxt">空气质量 优</text>
						<text class="tqxtxt">车内 20 / 车外 16</text>
					</view>
				</view>
			</uv-col>
			<uv-col span="3">
				<view class="demo-layout bg-purple-dark">
					<view style="display: flex; flex-direction: column; justify-content: space-evenly;">
						<text class="tqdtxt">空调状态</text>
						<view style="display: flex;flex-direction: column;">
							<text class="dtxt" v-if="aiCk.iskt">已启动</text>
							<text class="dtxt" v-if="!aiCk.iskt">已关闭</text>
							<text class="xtxt" v-if="aiCk.iskt">温度 20°C 风量 2</text>
						</view>
					</view>
					<image src="/static/home/kt.png"></image>

				</view>
			</uv-col>
		</uv-row>
		<uv-row customStyle="margin-top: 20rpx">
			<uv-col span="3">
				<view class="demo-layout2 bg-purple2">
					<image src="/static/music/yy.png" class="disc" :animation="animationData"></image>
					<view class="txt">
						<text class="dtxt">{{ml[ZtList.index].name}}</text>
						<text class="xtxt">{{ml[ZtList.index].authur}} {{ml[ZtList.index].name}}</text>
					</view>
					<view style="width: 100%;">
						<uv-line-progress active-color="#57caff" :show-text="false" :percentage="ZtList.currentTime" />
					</view>
					<view class="music">
						<image src="/static/music/syq.png" @click="TopMusic"></image>
						<image src="/static/music/zt.png" @click="MusicPlay" v-if="!ZtList.isplay"></image>
						<image src="/static/music/pf.png" @click="MusicPlay" v-if="ZtList.isplay"></image>
						<image src="/static/music/xyq.png" @click="BottomMusic"></image>
					</view>
				</view>
			</uv-col>
			<uv-col span="3">
				<view class="demo-layout2 bg-purple-light2">
				</view>
			</uv-col>
			<uv-col span="6" style="display: flex; flex-direction: column;">
				<view class="bg-purple-dark2" @click="tz('/pages/VehicleInformation/VehicleInformation')">
					<view class="aqtxt">
						<text class="dtxt">已安全伴您出行10000次</text>
						<text class="aqtxt_2">车况检测良好</text>
					</view>
					<view class="cartxt">
						<view>
							<view class="card">
								<image src="/static/car/jl.png"></image>
								<text>800km</text>
							</view>
							<view class="card">
								<image src="/static/car/wd.png"></image>
								<text>车内20°C / 车外16°C</text>
							</view>
							<view class="card">
								<image src="/static/car/dl.png"></image>
								<text>231KM</text>
							</view>
						</view>
						<image src="/static/car/car.png"></image>
					</view>
				</view>
				<view class="bg-purple-dark3">
					<view class="app-icon" v-for="(app, index) in quickApps" :key="index" @click="openApp(app)"
						@longpress="long">
						<image :src="app.icon" class="app-option-image" />
					</view>
					<view v-for="n in (5 - quickApps.length)" :key="'add-' + n" @click="showAppSelector">
						<view class="bg-purple-qpp" @click="showAppSelector"></view>
					</view>
				</view>

				<view class="app-selector" v-if="showSelector" @click="hideAppSelector">
					<view class="app-selector-content">
						<view>选择应用</view>
						<view class="text">
							<view style="width: 600rpx;	">
								<uv-input placeholder="前置图标" prefixIcon="search"
									prefixIconStyle="font-size: 22px;color: #909399"></uv-input>
							</view>
							<view :class="[!show ? 'txt' : 'txt1']" @click="show = !show">全部应用</view>
							<view :class="[show ? 'txt' : 'txt1']" @click="show = !show">系统应用</view>
						</view>
						<view style="display: flex; margin-top: 200rpx; margin-bottom: 200rpx;">
							<view class="test" v-for="(app, index) in allApps" :key="index" @click="addApp(app)">
								<image :src="app.icon" class="app-option-image" />
								<text class="app-option-name">{{ app.name }}</text>
							</view>
						</view>
						<view style="padding: 0rpx 1000rpx; ">
							<button type="primary" style="padding: 20rpx; font-size: 50rpx;">确定</button>
						</view>
					</view>
				</view>
			</uv-col>
		</uv-row>
		<view style="display: flex; justify-content: center;">
			<view class="bottom_jqr">
				<image src="/static/car/car.png" class="car"></image>
				<image src="/static/home/jqr.png" class="jqr" @click="ai"></image>
			</view>
		</view>

		<view class="tck" v-if="aiShow" @click="aishowSelector">
			<view class="bottom_text">
				<text v-if="aitext">{{aitext}}</text>
				<view>
					<canvas type="2d" class="recwave-WaveView" style="width:300px;height:100px"></canvas>
				</view>
			</view>
		</view>
		<view style="display: flex; justify-content: center;">
			<view class="bottom_tabas">
				<image src="/static/tabas/3.png"></image>
				<image src="/static/tabas/1.png"></image>
				<image src="/static/tabas/2.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import calendar from "@/uni_modules/nutpi-calendar/utssdk/index.uts";
	import {
		tex,
		mp3
	} from "../../api/baidu.js"
	import {
		getAliyunToken
	} from "../../api/token.js"
	import Recorder from 'recorder-core'
	import RecordApp from 'recorder-core/src/app-support/app'
	import '@/uni_modules/Recorder-UniCore/app-uni-support.js'
	// #ifdef H5 || MP-WEIXIN
	import 'recorder-core/src/engine/mp3'
	import 'recorder-core/src/engine/mp3-engine'
	import 'recorder-core/src/extensions/waveview'
	// #endif
	var music = uni.createInnerAudioContext()
	var aim = uni.createInnerAudioContext()
	export default {
		data() {
			return {
				show: true,
				time: {
					currentTime: '',
					currentDate: '',
					lunarDate: ''

				},
				animation: uni.createAnimation({
					timingFunction: "linear"
				}),
				animationData: {},
				rotateTimer: null,
				currentRotate: 0,
				currentStepStartTime: 0,
				tipList: [
					'有什么可以帮助你吗？',
					'需要协助完成操作吗？',
					'遇到问题可以随时告诉我~',
					'是否需要查看使用指南？',
					'需要我帮你快速导航吗？',
					'不清楚功能？我来帮你~',
					'需要调整设置参数吗？',
					'有疑问随时呼叫我哦！'
				],

				ZtList: {
					isplay: false,
					index: 0,
					currentTime: 0,
					duration: 0,
					isSy: false,
					jd: 0
				},
				ml: [{
					name: '我和我的祖国',
					authur: "中央乐团合唱团",
					src: "/static/music/whwdzg.mp3"
				}, {
					name: '说散就散',
					authur: "袁维娅",
					src: "/static/music/ssjs.mp3"
				}, {
					name: '最美的期待',
					authur: "周笔畅",
					src: "/static/music/zmdqd.mp3"
				}],
				ylist: null,
				showSelector: false,
				allApps: [{
						id: 1,
						name: '应用市场',
						icon: '/static/apps/yysc.png',
						Url: '/pages/appstod/appstod'
					},
					{
						id: 2,
						name: '天气',
						icon: '/static/apps/tq.png',
						Url: '/pages/tq/tq'
					},
					{
						id: 3,
						name: '空调',
						icon: '/static/apps/kt.png',
						Url: '/pages/kt/kt'
					},
					{
						id: 4,
						name: '音乐',
						icon: '/static/apps/yy.png',
						Url: '/pages/yinyue/yinyue'
					},
					// 更多App...
				],
				quickApps: [],
				aiShow: false,
				aitext: "",
				index: 0,
				aiCk: {
					iskt: false,
				},
				init: true,
			}
		},
		mounted() {
			this.getTime()
			this.timer = setInterval(() => this.getTime(), 60000)

			this.isMounted = true;
			//页面onShow时【必须调用】的函数，传入当前组件this
			RecordApp.UniPageOnShow(this);
			music.src = this.ml[this.ZtList.index].src
			// this.music.load();
			music.onTimeUpdate(() => {
				this.ZtList.currentTime = music.currentTime / music.duration * 100
				this.ZtList.duration = music.duration
				console.log(this.ZtList.currentTime)
				// console.log(this.ZtList.duration)
			})
			aim.onTimeUpdate(() => {
				if (!this.aiShow) {
					aim.stop()
				}
			})
			getAliyunToken().then((res) => {
				uni.setStorageSync("token", res.token)
			})
		},
		onShow() { //onShow可能比mounted先执行，页面可能还未准备好
			if (this.isMounted) RecordApp.UniPageOnShow(this);
		},
		methods: {
			showAppSelector() {
				this.showSelector = true;
			},
			hideAppSelector() {
				this.showSelector = false;
			},
			addApp(app) {
				this.quickApps.push(app);
				this.hideAppSelector();
			},
			openApp(app) {
				// 打开App的逻辑
				console.log(`Opening ${app.name}`);
				// 根据App的id或name跳转到对应的页面
			},
			TopMusic() {
				if (this.ZtList.index > 0) {
					this.ZtList.index--
					music.src = this.ml[this.ZtList.index].src
					music.play()
				}
			},
			MusicPlay() {
				this.ZtList.isplay = !this.ZtList.isplay
				if (this.ZtList.isplay) {
					music.play()
				} else {
					music.pause()
				}
				this.controlAnimation()
			},
			BottomMusic() {
				if (this.ZtList.index < this.ml.length) {
					this.ZtList.index++
					music.src = this.ml[this.ZtList.index].src
					music.play()
				}

			},
			getTime() {
				const now = new Date()
				const hours = now.getHours().toString().padStart(2, '0')
				const minutes = now.getMinutes().toString().padStart(2, '0')
				this.time.currentTime = `${hours}:${minutes}`

				const year = now.getFullYear()
				const month = (now.getMonth() + 1).toString().padStart(2, '0')
				const day = now.getDate().toString().padStart(2, '0')
				this.time.currentDate = `${year}-${month}-${day}`

				const lunarData = calendar.solar2lunar(year, month, day)
				this.time.lunarDate = `${lunarData.IMonthCn}${lunarData.IDayCn}`
			},
			playMusic() {
				this.music.show = !this.music.show
				//图片旋转
				this.controlAnimation();
			},
			controlAnimation() {
				if (this.ZtList.isplay) {
					clearInterval(this.rotateTimer);
					this.currentRotate += 360;
					this.currentStepStartTime = Date.now();
					this.animation.rotate(this.currentRotate).step({
						duration: 2000
					});
					this.animationData = this.animation.export();

					this.rotateTimer = setInterval(() => {
						this.currentRotate += 360;
						this.currentStepStartTime = Date.now();
						this.animation.rotate(this.currentRotate).step({
							duration: 2000
						});
						this.animationData = this.animation.export();
					}, 2000);
				} else {
					clearInterval(this.rotateTimer);
					this.rotateTimer = null;
					const elapsedTime = Date.now() - this.currentStepStartTime;
					const rotatedInStep = (360 / 2000) * elapsedTime;
					const realTimeRotate = this.currentRotate + rotatedInStep;
					this.currentRotate = realTimeRotate;
					this.animation.rotate(realTimeRotate).step({
						duration: 0
					});
					this.animationData = this.animation.export();
				}
			},
			tz(url) {
				uni.navigateTo({
					url: url,
				})
			},
			recReq() {
				RecordApp.UniWebViewActivate(this);
				RecordApp.RequestPermission(() => {
					console.log("已获得录音权限，可以开始录音了");
					this.recStart()
				}, (msg, isUserNotAllow) => {
					if (isUserNotAllow) {}
					console.error("请求录音权限失败：" + msg);
				});
			},
			//开始录音
			recStart() {
				//录音配置信息
				var set = {
					type: "mp3",
					sampleRate: 16000,
					bitRate: 16,
					onProcess: (buffers, powerLevel, duration, sampleRate, newBufferIdx, asyncEnd) => {
						let a = [powerLevel, duration]
						this.ylist = a
						if (duration > 3500) {
							if (powerLevel < 5) {
								this.recStop()
							}
						}
						if (!this.aiShow) {
							this.recStop()
						}

						// #ifdef H5 || MP-WEIXIN
						if (this.waveView) this.waveView.input(buffers[buffers.length - 1], powerLevel,
							sampleRate);
						// #endif
					}
				};
				RecordApp.UniWebViewActivate(this); //App环境下必须先切换成当前页面WebView
				RecordApp.Start(set, () => {
					// var int = setInterval(() => {
					// 	console.log(this.ylist)
					// 	// console.log(duration)
					// 	if (this.ylist[1] > 5000) {
					// 		clearInterval(int)
					// 	}
					// }, 1000)
					console.log("已开始录音");
					RecordApp.UniFindCanvas(this, [".recwave-WaveView"], `
			                this.waveView=Recorder.WaveView({compatibleCanvas:canvas1, width:300, height:100});
			            `, (canvas1) => {
						this.waveView = Recorder.WaveView({
							compatibleCanvas: canvas1,
							width: 300,
							height: 100
						});
					});
				}, (msg) => {
					console.error("开始录音失败：" + msg);
				});
			},
			//停止录音
			recStop() {
				//RecordApp.UniNativeUtsPluginCallAsync("androidNotifyService",{ close:true }) //关闭Android App后台录音保活服务
				RecordApp.Stop((arrayBuffer, duration, mime) => {
					// #ifdef H5

					var blob = new Blob([arrayBuffer], {
						type: mime
					});
					console.log(blob, (window.URL || webkitURL).createObjectURL(blob));
					// var file = new File([arrayBuffer], "recorder.mp3");
					tex(arrayBuffer).then((res) => {
						let a = res.data.result
						console.log(res.data.result)
						let Openaironditioner = '打开空调'
						let Closeaironditioner = '关闭空调'
						let OpenMucis = '播放音乐'
						let CloseMusic = '关闭音乐'
						let Weather = "今天天气"
						if (a.includes(Openaironditioner)) {
							if (!this.aiCk.iskt) {
								console.log("已打开空调")
								this.aiCk.iskt = true
								this.yuy("已打开空调")
							} else {
								console.log("空调是打开状态")
								this.aiCk.iskt = true
								this.yuy("空调是打开状态")
							}
							setTimeout(() => {
								this.aiShow = false
							}, 2000)

						} else if (a.includes(Closeaironditioner)) {
							if (this.aiCk.iskt) {
								console.log("已关闭空调")
								this.aiCk.iskt = false
								this.yuy("已关闭空调")
							} else {
								console.log("空调是关闭状态")
								this.aiCk.iskt = false
								this.yuy("空调是关闭状态")
							}
							setTimeout(() => {
								this.aiShow = false
							}, 2000)

							return
						} else if (a.includes(OpenMucis)) {
							if (!this.aiCk.iskt) {
								console.log("已打开音乐")
								this.ZtList.isplay = true
								music.play()
								this.controlAnimation()
								this.yuy("已打开音乐")
							} else {
								console.log("音乐是打开状态")
								this.yuy("音乐是打开状态")
							}
							setTimeout(() => {
								this.aiShow = false
							}, 2000)

							return
						} else if (a.includes(CloseMusic)) {
							if (this.ZtList.isplay) {
								console.log("已关闭音乐")
								this.ZtList.isplay = false
								music.pause()
								this.controlAnimation()
								this.yuy("已关闭音乐")

							} else {
								console.log("音乐是关闭状态")
								this.yuy("音乐是关闭状态")
							}
							setTimeout(() => {
								this.aiShow = false
							}, 2000)

							return
						} else if (a.includes(Weather)) {
							console.log("天气")
							this.yuy(
								"新余市今天天气为晴，当前温度16℃，全天温度 8至18℃，北风 1到2 级，空气质量优 PM2.5 指数 46。"
							)
							setTimeout(() => {
								this.aiShow = false
							}, 16000)
							return
						} else {
							this.aidh(res.data.result)
						}

					})
					//uni.uploadFile({file:file, ...}) //参考demo中的test_upload_saveFile.vue
					// #endif

					//如果是App、小程序环境，可以直接保存到本地文件，然后调用相关网络接口上传
					// #ifdef APP || MP-WEIXIN
					RecordApp.UniSaveLocalFile("recorder.mp3", arrayBuffer, (savePath) => {
						console.log(
							savePath
						); //app保存的文件夹为`plus.io.PUBLIC_DOWNLOADS`，小程序为 `wx.env.USER_DATA_PATH` 路径
						//uni.uploadFile({filePath:savePath, ...}) //参考demo中的test_upload_saveFile.vue
					}, (errMsg) => {
						console.error(errMsg)
					});
					// #endif
				}, (msg) => {
					console.error("结束录音失败：" + msg);
				});
			},
			ai() {
				this.aiShow = !this.aiShow
				this.aitext = ""
				if (this.init) {
					this.aidh("你好")
					this.init = !this.init
					setTimeout(() => {
						this.recReq()
					}, 5000)
				} else {
					this.aitext = "你好！很高兴见到你。有什么我可以帮助你的吗？"
					setTimeout(() => {
						this.recReq()
					}, 2000)

				}


			},
			// aishowSelector() {
			// 	this.aiShow = !this.aiShow
			// },
			aidh(text) {
				this.aitext = ""
				let that = this
				var fullText = ""
				const xhr = new XMLHttpRequest();
				xhr.open("POST", "http://localhost:11434/api/chat", true);
				xhr.setRequestHeader("Content-Type", "application/json");
				xhr.onprogress = () => {
					fullText = JSON.parse(xhr.responseText).message.content
					that.index = 0
					mp3(fullText).then((res) => {
						const arrayBuffer = res.data;
						const blob = new Blob([arrayBuffer], {
							type: 'audio/mpeg'
						});
						const blobUrl = URL.createObjectURL(blob);
						aim = uni.createInnerAudioContext()
						aim.src = blobUrl; // 设置音频源为 Blob URL
						// innerAudioContext.autoplay = true; // 自动播放（H5 需用户交互后触发，见注意事项）
						aim.play()
						aim.onPlay(() => {
							console.log('音频开始播放');
						});
						// 监听播放结束
						aim.onEnded(() => {
							console.log('音频播放结束');
							// 释放资源（关键：避免内存泄漏）
							aim.destroy();
							URL.revokeObjectURL(blobUrl); // 释放 Blob URL
						});
					})
					setTimeout(() => {
						typeText()
					}, 500)

					function typeText() {
						if (that.index < fullText.length) {
							that.aitext += fullText[that.index];
							that.index++;
							console.log(that.aitext)
							setTimeout(() => {
								typeText()
							}, 200); // 调整速度，100毫秒一个字符
						}
					}
				};
				xhr.send(JSON.stringify({
					"model": "qwen2.5:1.5b",
					"messages": [{
						"role": "user",
						"content": text
					}],
					"stream": false, // 是否启用流式响应
					"options": {
						"temperature": 0.1,
						"max_tokens": 10000,
						"top_p": 0.7
					}
				}));
			},
			yuy(t) {
				let that = this
				this.index = 0
				this.aitext = ""
				mp3(t).then((res) => {
					const arrayBuffer = res.data;
					const blob = new Blob([arrayBuffer], {
						type: 'audio/mpeg'
					});
					const blobUrl = URL.createObjectURL(blob);
					aim.src = blobUrl; // 设置音频源为 Blob URL
					// innerAudioContext.autoplay = true; // 自动播放（H5 需用户交互后触发，见注意事项）
					aim.play()
					aim.onPlay(() => {
						console.log('音频开始播放');
					});
					// 监听播放结束
					aim.onEnded(() => {
						console.log('音频播放结束');
						// 释放资源（关键：避免内存泄漏）
						aim.destroy();
						URL.revokeObjectURL(blobUrl); // 释放 Blob URL
					});
				})

				typeText()


				function typeText() {
					if (that.index < t.length) {
						that.aitext += t[that.index];
						that.index++;
						console.log(that.aitext)
						setTimeout(() => {
							typeText()
						}, 200); // 调整速度，100毫秒一个字符
					}

				}
			}
		},
		onUnload() {
			clearInterval(this.rotateTimer)
			clearInterval(this.timer)
		}

	}
</script>

<style lang="scss">
	.bj {
		background-image: url("/static/home/BG.png");
		width: 100vw;
		height: 100vh;
	}

	.usertxt {
		display: flex;
		align-items: center;
		padding: 50rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
		}

		view {
			margin: 20rpx;
			font-size: 50rpx;
			color: white;
		}

	}

	.demo-layout {
		height: 500rpx;
		background-image: url("/static/home/hb.png");
		border-radius: 4px;
		background-size: 100% 100%;
		margin: 50rpx;
	}

	.bg-purple {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.TimeCard {
		font-size: 200rpx;

	}

	.TimeCard_1 {
		display: flex;
		margin: 20rpx;
		width: 100%;
		justify-content: space-evenly;

	}

	.TimeCard_1_1 {
		font-size: 60rpx;
	}


	.bg-purple-light {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 50rpx;
		padding-right: 100rpx;

		image {
			width: 400rpx;
			height: 300rpx;
			margin: 50rpx;

		}
	}

	.tqdtxt {
		font-size: 80rpx;
		margin: 10rpx;
	}

	.tqxtxt {
		font-size: 50rpx;
		color: #b3b3b3;
		margin: 10rpx;
	}

	.bg-purple-dark {
		display: flex;
		justify-content: space-evenly;
		align-items: center;

		image {
			width: 300rpx;
			height: 300rpx;
		}
	}

	.demo-layout2 {
		height: 900rpx;
		border-radius: 4px;
		margin-left: 50rpx;
		margin-right: 50rpx;
	}

	.bg-purple2 {
		// background-image: url("/static/home/hb.png");
		// background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		padding: 50rpx;

	}

	.disc {
		width: 400rpx;
		height: 400rpx;
		border-radius: 50%;
		transform-origin: center center;
	}

	.txt {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.dtxt {
		font-size: 60rpx;
		margin: 10rpx;
	}

	.xtxt {
		font-size: 30rpx;
		color: #b3b3b3;
		margin: 10rpx;
	}

	.music {
		width: 100%;
		margin: 20rpx;
		display: flex;
		justify-content: space-evenly;

		image {
			width: 120rpx;
			height: 120rpx;
		}
	}

	.bg-purple-light2 {
		background-image: url("/static/home/DH.png");
		background-size: 100% 100%;
	}

	.bg-purple-dark2 {
		background-image: url("/static/home/CXK.png");
		background-size: 100% 100%;
		height: 500rpx;
		border-radius: 20rpx;
		margin-bottom: 50rpx;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		padding-left: 100rpx;
		padding-right: 50rpx;
	}

	.aqtxt {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		margin-right: 100rpx;

	}

	.aqtxt_2 {
		background-image: url("/static/car/bjcar.png");
		color: white;
		background-size: 100% 100%;
		padding-left: 80rpx;
		padding-right: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.cartxt {
		display: flex;
		justify-content: space-between;

		image {
			height: 400rpx;
			width: 800rpx;
		}
	}

	.card {
		display: flex;
		align-items: center;
		margin-left: 50rpx;

		image {
			width: 100rpx;
			height: 100rpx;
			margin: 5rpx;
		}

		text {
			font-size: 50rpx;
			margin: 5rpx;
			margin-left: 20rpx;
		}
	}

	.bg-purple-dark3 {
		height: 300rpx;
		border-radius: 20rpx;
		margin-right: 50rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		background-color: rgba(255, 255, 255, 0.3);
	}

	.bg-purple-qpp {
		width: 180rpx;
		height: 180rpx;
		background-image: url("/static/home/tjApp.png");
		background-size: 100% 100%;
		border-radius: 20rpx;
	}

	.bottom_jqr {
		width: 80%;
		display: flex;
		justify-content: space-between;
		align-items: end;

	}

	.jqr {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
	}

	.car {
		width: 350rpx;
		height: 150rpx;
	}


	.tck {
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.bottom_text {
		position: absolute;
		bottom: 180rpx;
		right: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		text {
			padding: 30rpx 100rpx;
			background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.95), rgba(31, 41, 55, 0.95));
			backdrop-filter: blur(12px);
			border-radius: 100rpx;
			border: 1px solid rgba(255, 255, 255, 0.1);
			box-shadow: 0 0 30px rgba(79, 70, 229, 0.15);
			color: white;
			font-size: 50rpx;
		}

	}


	.tooltip-container {
		position: relative;
		display: inline-block;
	}



	.tooltip-container:hover .btn-gradient-bg {
		opacity: 0.75;
	}

	/* 提示框容器 */
	.tooltip-box {
		position: absolute;
		visibility: hidden;
		opacity: 0;
		bottom: 100%;
		left: -10%;
		transform: translateX(-50%) translateY(0.5rem);
		margin-bottom: 0.75rem;
		width: 18rem;
		transition: all 300ms ease-out;

	}

	.tooltip-container:hover .tooltip-box {
		visibility: visible;
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}

	/* 提示框内容 */
	.tooltip-content {
		position: relative;
		padding: 1rem;
		background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.95), rgba(31, 41, 55, 0.95));
		backdrop-filter: blur(12px);
		border-radius: 1rem;
		border: 1px solid rgba(255, 255, 255, 0.1);
		box-shadow: 0 0 30px rgba(79, 70, 229, 0.15);
	}

	.header-icon-box {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		background-color: rgba(79, 70, 229, 0.2);
	}

	.header-icon {
		width: 1rem;
		height: 1rem;
		color: rgba(129, 140, 248, 1);
	}

	.header-title {
		font-size: 1rem;
		font-weight: 600;
		color: white;
		margin: 0;
	}


	.body-text {
		font-size: 0.875rem;
		color: rgba(209, 213, 219, 1);
	}

	.body-footer {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: 0.75rem;
		color: rgba(156, 163, 175, 1);
	}



	/* 内容渐变背景 */
	.content-gradient-bg {
		position: absolute;
		inset: 0;
		border-radius: 1rem;
		// background: linear-gradient(to right, rgba(79, 70, 229, 0.1), rgba(139, 92, 246, 0.1));
		filter: blur(24px);
		opacity: 0.5;
	}

	/* 提示框箭头 */
	.tooltip-arrow {
		position: absolute;
		bottom: -0.375rem;
		left: 70%;
		transform: translateX(-50%) rotate(45deg);
		width: 0.75rem;
		height: 0.75rem;
		background: linear-gradient(to bottom right, rgba(17, 24, 39, 0.95), rgba(31, 41, 55, 0.95));
		border-right: 1px solid rgba(255, 255, 255, 0.1);
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.app-selector {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.app-selector-content {
		width: 80%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
	}

	.text {
		display: flex;
		align-items: center;
	}

	.txt {
		padding: 20rpx;
		font-size: 60rpx;
	}

	.txt1 {
		color: #00aaff;
		padding: 20rpx;
		font-size: 60rpx;
	}


	.test {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;


	}


	.app-option-image {
		width: 180rpx;
		height: 180rpx;
		margin-right: 10px;
	}

	.app-option-name {
		font-size: 16px;
	}

	.bottom_tabas {
		display: flex;
		position: fixed;
		bottom: 50rpx;
		width: 25%;
		justify-content: space-between;

		image {
			width: 60rpx;
			height: 60rpx;
		}

	}
</style>